<!-- 
  概念: 虚拟dom vnode 就是对于真实dom的一个js对象映射
  <div class="wrapper">this is div</div>
 -->
<div id="app"></div>
<script>
  // 下面的这个对象就是一个大家常说的虚拟dom对象 本质上就是一个js对象 只不过是用来描述真实的dom对象
  const vnodeDiv = {
    tag: 'div',
    props: {
      class: 'wrapper'
    },
    children: 'this is div'
  }
  // 虚拟的dom如何变成的真实的dom -> 挂载(渲染)
  function mount (vnode, dom) {
    // 完成vnode变成 真实的dom
    const { tag, props, children } = vnode
    // 使用tag生成一个divdom元素
    const div = document.createElement(tag)
    // 给div设置 classs属性
    div.setAttribute('class', props.class)
    // 把文本子节点添加到div内部
    div.innerText = children
    // 把div dom 渲染到 id为app的节点内
    dom.appendChild(div)
  }
  mount(vnodeDiv, document.getElementById('app'))
  // 为什么需要一个vnode?
  // 1. 在绝大多数的情况下 比我们直接手动操作dom要快 引入vnode之后 框架通过diff算法可以帮助我们
  // 找到最小化的更新方式  提高渲染性能 [vnode 比 原生dom快]
  // 2. 矿平台  原生的dom对象 只针对于浏览器  但是如果我们变成了原生的js js对象会更容易被渲染到
  // 其他平台 比如原生 服务端
</script>